<?php
/**
 * 用户菜单组件
 * 用于展示用户登录状态下的下拉菜单
 */
$configKey = isset($configKey) ? $configKey : 'user-menu';
// 模拟用户登录状态
$isLoggedIn = false; // 实际项目中可通过Session判断

// 从页面配置获取用户菜单组件配置，使用默认值作为后备
$data = array_merge([
    'section_id' => $configKey,
    'section_pretitle' => '用户菜单',
    'section_title' => '用户菜单',
    'section_subtitle' => '用户菜单',
    'layout' => 'grid', // grid 或 carousel
    'columns' => '3', // 1-3列（网格布局时有效）
    'bg_color' => 'gray-50',
    'text_color' => 'text-gray-700',
    'login_text' => '登录/注册',
    'login_icon' => 'fa-user-circle',
    'dropdown_icon' => 'fa-chevron-down',
    'logout_text' => '退出登录',
    'logout_color' => 'text-red-600',
    'user_info' => [
        'avatar_url' => 'https://picsum.photos/id/64/40/40',
        'user_name' => '张三',
    ],
    'items' => [
        [
            'url' => '/profile.php',
            'title' => '个人中心',
        ],
        [
            'url' => '/orders.php',
            'title' => '我的订单',
        ],
        [
            'url' => '/settings.php',
            'title' => '设置',
        ]
    ]
], $pageConfig['components'][$configKey] ?? []);

// 处理布局和样式类
$columnClasses = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-1 md:grid-cols-2',
    '3' => 'grid-cols-1 md:grid-cols-3'
];
$columnClass = $columnClasses[$data['columns'] ?? '3'];

?>
<div class="relative">
    <?php if ($isLoggedIn): ?>
        <!-- 已登录状态 -->
        <button id="user-menu-button" class="flex items-center space-x-1 focus:outline-none">
            <img src="<?= $data['user_info']['avatar_url'] ?>" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
            <span class="hidden sm:inline text-sm font-medium text-gray-700"><?= $data['user_info']['user_name'] ?></span>
            <i class="fa <?= $data['dropdown_icon'] ?> text-xs text-gray-500"></i>
        </button>
        
        <!-- 用户下拉菜单 -->
        <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden z-50">
            <?php foreach ($data['items'] as $item): ?>
                <a href="<?= $item['url'] ?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><?= $item['title'] ?></a>
            <?php endforeach; ?>
            <div class="border-t border-gray-100"></div>
            <a href="/logout.php" class="block px-4 py-2 text-sm <?= $data['logout_color'] ?> hover:bg-gray-100"><?= $data['logout_text'] ?></a>
        </div>
    <?php else: ?>
        <!-- 未登录状态 -->
        <a href="/login.php" class="flex items-center text-sm text-gray-600 hover:text-primary transition-custom">
            <i class="fa <?= $data['login_icon'] ?> mr-1"></i>
            <span><?= $data['login_text'] ?></span>
        </a>
    <?php endif; ?>
</div>

<script>
// 用户菜单交互脚本
document.addEventListener('DOMContentLoaded', function() {
    const userMenuButton = document.getElementById('user-menu-button');
    const userDropdown = document.getElementById('user-dropdown');
    
    if (userMenuButton && userDropdown) {
        userMenuButton.addEventListener('click', function() {
            userDropdown.classList.toggle('hidden');
        });
        
        // 点击其他地方关闭菜单
        document.addEventListener('click', function(event) {
            if (!userMenuButton.contains(event.target) && !userDropdown.contains(event.target)) {
                userDropdown.classList.add('hidden');
            }
        });
    }
});
</script>
    